<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="com.lei.entity.Product"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
	<head>
		<title>My JSP 'main.jsp' starting page</title>

		<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
		<link href="style/bootstrap.min.css" rel="stylesheet">

		<style type="text/css">
.tit {
	padding-left: 40%;
}

.ha {
	padding-left: 35%;
}
</style>

	</head>

	<body>

		<div id="product"></div>


		<h3 class="tit">
			已有商品列表
		</h3>
		<br />
		<br />

		<table id="mytable" class="zebra-striped">
			<thead id="thead">
				<tr>
					<th>
						商品编号
					</th>
					<th>
						名称
					</th>
					<th>
						价格
					</th>
					<th>
						是否上架
					</th>
					<th>
						操作
					</th>
				</tr>
			</thead>

			<tbody id="tbody">
				<% 
				List<Product> list=(List<Product>)session.getAttribute("prolist");
				for(Product p:list){
				%>
				<tr>
					<td><%=p.getId() %></td>
					<td><%=p.getName() %></td>
					<td>
						￥<%=p.getPrice() %></td>
					<td><%=p.isShangjia()?"Yes":"No" %></td>
					<td>
						<a class="chakan" href="javascript:void(0)">查看 </a>
					</td>
				</tr>

				<%} %>
			</tbody>

		</table>


		<div>
			<h3 class="tit">
				添加商品
			</h3>
			<div class="ha">
				商品编号：
				<input type="text" id="proid" value="" />
			</div>
			<br />
			<div class="ha">
				商品名称：
				<input type="text" id="proname" value="" />
			</div>
			<br />
			<div class="ha">
				商品价格：
				<input type="text" id="proprice" value="" />
			</div>
			<br />
			<div class="ha">
				是否上架：
				<input id="up" type="radio" name="r" checked="checked" value="true" />
				是
				<input id="up" type="radio" name="r" value="false" />
				否
			</div>
			<br />
			<div class="ha">
				<button id="add">
					添加
				</button>
			</div>
		</div>


		<script type="text/javascript">
	$("#add").click(
			function() {
				$.post("ajax.jspx", {
					"id" : $("input:eq(0)").val(),
					"name" : $("input:eq(1)").val(),
					"price" : $("input:eq(2)").val(),
					"shangjia" : $("input[name='r']:checked").val()
				}, function(data) {
					$(
							"<tr><td>" + this.id + "</td><td>" + this.name
									+ "</td><td>" + this.price + "</td><td>"
									+ this.shangjia + "</td></tr>").appendTo(
							$("tbody"));
				});
			});

	/*document.getElementById("chakan").onclick=chaKan;
		
		function chaKan(){
			
			xmlHttp.open("POST", "ajax.jspx", true);
			//xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			//xmlHttp.send("name="+name);
			//xmlHttp.onreadystatechange=chakanback;
			
			//xmlHttp.open("GET","chakan.jspx?id="+id+"&name="+name+"&price="+price,true);
			//xmlHttp.send();
		}*/

	$(".chakan").click(function() {
		var tr = $(this).parent("td").parent("tr");
		$("input:eq(0)").val(tr.children("td:eq(0)").text());
		$("input:eq(1)").val(tr.children("td:eq(1)").text());
		$("input:eq(2)").val(tr.children("td:eq(2)").text());
	});

	function chakanback() {
		if (xmlHttp.readyState == 4) {
			if (xmlHttp.status == 200) {
				var xml = xmlHttp.responseXML;

				document.getElementById("proid").value = "";
				document.getElementById("proname").value = "";
				document.getElementById("proprice").value = "";

			} else {
				alert("Ajax Error!");
			}
		}
	}
</script>

	</body>
</html>
